<template>
   <div class="w-full h-full p-2 overflow-y-hidden" >
    <div class="w-full ">
      <Textarea v-model:value="chatMessage" :rows="8"></Textarea>
      <Button @click="gen">生成消息</Button>
    </div>
    <div  class="w-full h-1/2 bg-black border-1 " v-html="renderedAnswer" />
   </div>
</template>

<script setup lang="ts">
import {nextTick, onMounted, ref, watch} from 'vue';
import MarkdownIt from 'markdown-it';
import {Textarea,Button} from 'ant-design-vue'
import highlightjs from 'markdown-it-highlightjs'
import MarkdownItPluginEcharts  from '@lexmin0412/markdown-it-echarts'

const chatMessage = ref('')

const renderedAnswer = ref('')
const md = new MarkdownIt({
  html:true,
  breaks:true,
})
md.use(highlightjs).use(MarkdownItPluginEcharts)

// md.use(function (md) {
//   md.renderer.rules.fence = function (tokens, idx, options, env, slf) {
//     console.log(tokens)
//     // 此处判断是否为 echarts 代码块
//     if (tokens[idx].info === "echarts") {
//       eChartOption.value = JSON.parse(tokens[idx].content) //此处表示将内容存起来，存到当前页面的变量去
//       return `<div id="echarts-id" style="width: 600px;height:400px;"></div>`
//     } else { // 其他代码块
//       return `<pre><code class='languge-${tokens[idx].info}'>${tokens[idx].content}</code></pre>`;
//     }
//   }
// })

function gen() {
  renderedAnswer.value = md.render(chatMessage.value)
}

// watch(eChartOption,()=> {

//    nextTick(()=> {
//       const chartDom = document.getElementById('echarts-id')
//       const myChart = echarts.init(chartDom)
//       myChart.setOption(eChartOption.value)

//    })
// })

onMounted(()=> {
 
})



</script>

<style scoped>
.read-the-docs {
  color: #888;
}
</style>
